<template>
	<gracePage statusBarBG="#EB5D4B" :headerHeight="0">
		<view slot="gHeader" class="grace-border-b">
			<graceHeader background="#FFFFFF" style="height: 88rpx;">
				<view class="grace-header-body">
					<!-- 返回按钮 -->
					<view class="grace-header-icons grace-icons icon-arrow-left" @tap="goback"></view>
					<!-- 中间内容 -->
					<view class="grace-header-content-noflex" style="margin-right: 50rpx;text-align: center;color: #333333;font-size: 30rpx;">设置</view>
				</view>
			</graceHeader>
		</view>
		<view slot="gBody" class="grace-body">
			<view class="user-info">
				<view class="user-data grace-flex grace-rows grace-space-between grace-flex-vcenter grace-border-b">
					<view class="user-data grace-flex grace-rows grace-flex-vcenter" style="margin-left: 30rpx;">
						<image style="width: 100rpx;height: 100rpx;border-radius: 50%;" :src="memberinfo.imgurl?memberinfo.imgurl:'../../static/logo.png'" mode="scaleToFill"></image>
						<text style="color: #333333;font-size: 28rpx;margin-left: 35rpx;">{{memberinfo.nickname}}</text>
					</view>
					<text class="edit" @tap="editUserInfo">编辑</text>
				</view>
				<view class="address grace-flex grace-rows grace-space-between grace-flex-vcenter" @tap="goaddresslist">
					<text style="color: #666666;font-size: 28rpx;margin-left: 35rpx;">收货地址</text>
					<text class="grace-icons icon-arrow-right" style="margin-right: 35rpx;color: #666666;"></text>
				</view>
			</view>
			<view class="control-over-invoices grace-flex grace-rows grace-space-between grace-flex-vcenter" style="margin-top: 50rpx;margin-bottom: 20rpx;" v-if="false">
				<text style="color: #333333;font-size: 28rpx;margin-left: 35rpx;">开票抬头</text>
				<text class="add_btn" @tap="gotoaddinvoices">+新增</text>
				<!-- <text class="manage">+管理</text> -->
			</view>
			<view class="invoices-list" v-if="false">
				<view class="invoices-item grace-border-b grace-flex grace-rows grace-space-between grace-flex-vcenter">
					<text class="content">南京可达尔技术</text>
					<text class="delete">删除</text>
				</view>
				<view class="invoices-item grace-border-b grace-flex grace-rows grace-space-between grace-flex-vcenter">
					<text class="content">南京可达尔技术</text>
					<text class="delete">删除</text>
				</view>
				<view class="invoices-item grace-border-b grace-flex grace-rows grace-space-between grace-flex-vcenter">
					<text class="content">南京可达尔技术</text>
					<text class="delete">删除</text>
				</view>
			</view>
			<view class="out-btn" @tap="outAccount">退出账户</view>
		</view>
	</gracePage>
</template>
<script>
import gracePage from '../../graceUI/components/gracePage.vue';
import graceHeader from '../../graceUI/components/graceHeader.vue';
export default {
	data() {
		return {
			memberinfo:{}
		};
	},
	onShow() {
		this.gRequest.get('/login/getmemberinfo', {
			member_id:JSON.parse(uni.getStorageSync("userInfo")).member_id
		}, res => {
			this.setData({ memberinfo: res.data });
		});
	},
	methods: {
		goback: function() {
			uni.navigateBack({});
		},
		gotoaddinvoices: function() {
			uni.navigateTo({
				url: '../my/addInvoice'
			});
		},
		editUserInfo: function() {
			uni.navigateTo({
				url: '../my/setUpUserInfo'
			});
		},
		goaddresslist: function() {
			uni.navigateTo({
				url: '../my/addressList'
			});
		},
		outAccount: function() {
			uni.removeStorage({
			    key: 'userInfo',
			    success: function (res) {
			        uni.switchTab({
			        	url: '../index/index'
			        });
			    }
			});
		},
	},
	components: {
		gracePage,
		graceHeader
	}
};
</script>
<style lang="scss" scoped>
page {
	background: #f4f4f4;
}
.grace-body {
	padding: 0 44rpx;
	margin-top: 120rpx;
}
.user-info {
	width: 670rpx;
	height: 275rpx;
	background: rgba(255, 255, 255, 1);
	box-shadow: 0rpx 2rpx 5rpx 0rpx rgba(204, 204, 204, 0.3);
	border-radius: 16rpx;
	.user-data {
		height: 170rpx;
	}
	.address {
		height: 104rpx;
	}
	.edit {
		width: 100rpx;
		height: 48rpx;
		line-height: 48rpx;
		text-align: center;
		border: 2rpx solid #eb5d4b;
		color: #eb5d4b;
		font-size: 28rpx;
		border-radius: 10rpx;
		margin-right: 35rpx;
	}
}

.add_btn {
	width: 120rpx;
	height: 60rpx;
	background-color: #eb5d4b;
	color: #ffffff;
	border-radius: 60rpx;
	text-align: center;
	line-height: 60rpx;
	margin-left: auto;
	margin-right: 35rpx;
}
.manage {
	width: 120rpx;
	height: 60rpx;
	background-color: #ffffff;
	color: #333333;
	border-radius: 60rpx;
	text-align: center;
	line-height: 60rpx;
	margin-right: 35rpx;
}
.invoices-list {
	width: 670rpx;
	background-color: #FFFFFF;
	box-shadow:0px 2px 5px 0px rgba(204,204,204,0.3);
	border-radius:16px;
	.invoices-item {
		height: 96rpx;
		.content {
			margin-left: 30rpx;
			line-height: 96rpx;
			font-size: 28rpx;
			color: #666666;
		}
		.delete {
			margin-right: 30rpx;
			line-height: 96rpx;
			font-size: 24rpx;
			color: #999999;
		}
	}
}
.out-btn {
	width:620rpx;
	height:94rpx;
	margin-top:140rpx ;
	background:#EB5D4B;
	border-radius:47rpx;
	text-align: center;
	line-height: 94rpx;
	color: #FFFFFF;
	font-size: 28rpx;
	margin-left: 20rpx;
}
</style>
